<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/seller/cancel_order.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/seller/evaluation_management.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/seller/shop_management.css"/>
    <style>
        body {
            font-family: Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC, Microsoft YaHei !important;
            font-size: 14px !important;
            line-height: 1.28571 !important;
            color: #333 !important;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
</head>
<body>
<script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!-- nav -->
<jsp:include page="/public_page/nav.jsp"></jsp:include>
<div id="page">
    <div id="content" style="width: 1190px;">
        <div class="layout grid-s140m0">
            <div class="col-main">
                <div id="J_Region" class="main-wrap">
                    <div class="shop-title">店铺管理</div>
                    <div id="root">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>店铺资料</span>
                                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                            </div>
                            <div class="text item" style="font-weight: bold">
                                亲爱的{{ sellerName }}，填写店铺资料能美化你的店铺，有助于用户的搜索和关注 ， 上一次修改时间：{{ beforeUpdateTime }}
                            </div>

                            <el-form ref="shopInfo" :model="shopInfo" label-width="80px" :rules="shopInfoRules">
                                <el-form-item label="店铺名称：" prop="name">
                                    <el-input v-model="shopInfo.name"></el-input>
                                </el-form-item>
                                <el-form-item label="店铺地址：" prop="address">
                                    <el-cascader
                                            placeholder="请点击选择地址"
                                            :options="options"
                                            v-model="selectedOptions"
                                            @change="handleChange"
                                    ></el-cascader>
                                </el-form-item>
                                <el-form-item label="店铺简介：" prop="detail">
                                    <el-input type="textarea" v-model="shopInfo.detail"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitShopPrimaryDetail">保存修改</el-button>
                                </el-form-item>
                            </el-form>

                            <el-divider content-position="left">店铺美化设置 (立即生效)</el-divider>
                            <div class="shop-io">
                            <div style="display: inline-block;position: relative;top: 50px; margin-right: 12px;">店铺头像：</div>
                            <el-upload style="display: inline-block;  margin-right: 100px;"
                                    action="/seller_logic/uploadShopHead.htm"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :limit="1"
                                    :on-change="handleChange"
                                    :class="{ hide: hideUpload }"
                                    :file-list="fileList"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                            <div class="shop-big-image">
                            <div style="display: inline-block;position: relative;top: 50px;">店铺招牌图：</div>
                            <!-- 店铺招牌图 -->
                            <el-upload style="display: inline-block;"
                                       action="/seller_logic/uploadShopPrimaryImage.htm"
                                       list-type="picture-card"
                                       :on-preview="handlePictureCardPreview"
                                       :on-remove="handleRemove2"
                                       :on-change="handleChange2"
                                       :class="{ hide: hideUpload2 }"
                                       :file-list="fileList2"
                                       :limit="1"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                            </div>

                            <div class="block">
                                <span class="demonstration">店铺分类背景颜色：</span>
                                <el-color-picker v-model="categoryBackgroundColor" @change="changeCategoryBackgroundColor"></el-color-picker>
                            </div>
                                <div class="block">
                                    <span class="demonstration">店铺分类前景颜色：</span>
                                    <el-color-picker v-model="categoryForegroundColor" @change="changeCategoryForegroundColor"></el-color-picker>
                                    <span>下方为模拟分类菜单状态↓↓↓</span>
                                </div>
                                <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-nav-ch " style="display: block;visibility: visible;">
                                    <s class="skin-box-tp"><b></b></s>
                                    <div class="skin-box-bd" :style="'background-color:' +this.categoryBackgroundColor">
                                        <div class="all-cats popup-container">
                                            <div class="all-cats-trigger popup-trigger">
                                                <a class="link ":style="'background-color:' +this.categoryBackgroundColor">
													<span class="title" :style="'color:' +this.categoryForegroundColor">
														本店所有商品
													</span>
                                                    <i class="popup-icon"></i>
                                                </a>
                                            </div>

                                        </div>
                                        <ul class="menu-list">
                                            <li class="menu">
                                                <a class="link" :style="'color:' +this.categoryForegroundColor"><span class="title">首页</span></a>
                                            </li>

                                            <li class="menu ">
                                                <a class="link":style="'color:' +this.categoryForegroundColor">
                                                    <span class="title">开发人员专区</span></a>
                                            </li>

                                            <li class="menu ">
                                                <a class="link":style="'color:' +this.categoryForegroundColor">
                                                    <span class="title">虚拟物品</span></a>
                                            </li>

                                        </ul>
                                    </div>
                                    <s class="skin-box-bt"><b></b></s>
                                </div>

                                <!-- 店铺轮播图 -->
                                <el-divider content-position="left">店铺轮播图管理</el-divider>
                                <el-upload ref="uploader"
                                           class="upload-demo"
                                           name="file"
                                           action="/seller_logic/addShopSwitchImage.htm"
                                           :on-preview="handleSwitchPreview"
                                           :on-remove="handleRemove"
                                           :before-remove="beforeRemove"
                                           :file-list="revolvingLanternImages"
                                           multiple
                                           :before-upload="beforeUpload"
                                           :on-success="handleSuccess"
                                           :on-exceed="handleExceed"
                                           list-type="picture"
                                           :limit="6">
                                    <el-button size="small" type="primary">点击上传轮播图</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过6张图片</div>
                                </el-upload>
                                <el-dialog :visible.sync="switchVisible" width="1800px" title="轮播图效果展示 - 店铺管理">
                                    <el-divider></el-divider>
                                    <el-carousel height="600px; ">
                                        <el-carousel-item v-for="item in revolvingLanternImages" :key="item">
                                            <img :src="item.url" style="width: 1800px; height: 600px;"/>
                                        </el-carousel-item>
                                    </el-carousel>
                                </el-dialog>

                                <div style="margin-bottom: 300px;"></div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <!-- 左侧导航栏 -->
            <jsp:include page="seller_left_nav.jsp"></jsp:include>
        </div>
    </div>
</div>
<div class="tm-dialog-mask" style="display: none"></div>
<style>
    .box-card {
         width: 986px !important;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .shop-io{
        margin: 0 0 26px 10px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
    .hide .el-upload--picture-card{
        display: none;
    }
    .el-upload-list--picture-card .el-upload-list__item, .el-upload--picture-card {
        width: 110px;
        height: 110px;
    }
    .el-upload--picture-card i {
        line-height: 110px;
    }
    .el-color-picker {
        top: 16px;
    }
    .shop-big-image{
        display: inline-block;
    }

    .shop-big-image .hide{
        margin-left: 84px;
    }

    .shop-big-image .el-upload-list--picture-card .el-upload-list__item, .shop-big-image .el-upload--picture-card {
        width: 810px;
        height: 110px;
    }
    .el-form-item__label{
        padding: 0;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-carousel__container{
        height: 600px;
    }
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el: '#root',
        data: {
            sellerName: '',
            beforeUpdateTime: '',
            hideUpload: false,
            hideUpload2: false,
            dialogImageUrl: '',
            dialogVisible: false,
            //文件回显
            fileList: [],
            fileList2: [],
            // 店铺分类颜色
            categoryBackgroundColor: '#409EFF',
            // 店铺分类前景颜色
            categoryForegroundColor: null,
            // 店铺文字资料
            shopInfo: {
                name: '',
                address: '',
                addressCode: '',
                detail: '',
            },
            shopInfoRules:{
                name: [
                    { required: true, message: '请输入店铺名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                detail:[
                    { required: true, message: '请输入店铺简介', trigger: 'blur' },
                    { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
                ],
            },
            // 地区
            options: [],
            selectedOptions: [],
            cityArr: [], //城市列表
            areaArr: [], //区县列表
            province: "", //省
            city: "", //市
            area: "", // 区县,
            provinceCityArea: "", //选择器选择的省市区
            //轮播图图片
            revolvingLanternImages: [],
            // 轮播图展示面板显示隐藏
            switchVisible: false,
        },
        methods: {
            // 获取卖家信息
            findSellerInfo(){
                axios.post("/seller_logic/getSellerInfo.htm").then(res =>{
                   this.sellerName = res.data.data.sellerName;
                });
            },
            // 提交店铺主要信息资料
            submitShopPrimaryDetail(){
                this.$refs.shopInfo.validate((valid) =>{
                   if(valid){
                       axios.post("/seller_logic/submitShopPrimaryDetail.htm", this.shopInfo).then(res =>{
                           this.$message({
                               message: '信息修改成功',
                               type: 'success'
                           });
                       });
                       this.beforeUpdateTime = Totoro.getNowTime();
                   } else{
                       this.$message({
                           message: '信息未填写完整',
                           type: 'warning'
                       });
                       return false;
                   }
                });
            },


            // 删除店铺头像
            handleRemove(file, fileList) {
                this.hideUpload = fileList.length >= this.limitCount;
                // 删除图片
                axios.post("/seller_logic/deleteShopHead.htm").then(res =>{
                    this.getNewShop();
                })
            },
            // 改变完店铺头像
            handleChange(fileList) {
                this.hideUpload = fileList.length >= this.limitCount;
                this.hideUpload = true; //此时值为ture时 才会执行隐藏
            },
            // 删除店铺招牌图
            handleRemove2(file, fileList) {
                this.hideUpload2 = fileList.length >= this.limitCount;
                // 删除图片
                axios.post("/seller_logic/deleteShopPrimaryImage.htm").then(res =>{
                    this.getNewShop();
                })
            },
            // 改变完店铺招牌图
            handleChange2(fileList) {
                this.hideUpload2 = fileList.length >= this.limitCount;
                this.hideUpload2 = true; //此时值为ture时 才会执行隐藏
            },
            // 点击店铺招牌图和头像，展示大图
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 获得店铺信息
            getNewShop(){
                axios.post("/seller_logic/findShop.htm").then(res=> {
                    var response = res.data;
                    // 上一次修改时间
                    this.beforeUpdateTime = response.data.updateTime;
                    // 先渲染店铺头像
                    var shopHead = response.data.shopHead;
                    this.fileList = [], this.fileList2 = [];
                    if(shopHead.length < 1){

                    } else{
                        this.hideUpload = true;
                        this.fileList.push({name: shopHead, url: '/static/img/seller/shop/'+shopHead});
                    }
                    // 店铺背景颜色 & 前景色
                    this.categoryBackgroundColor = response.data.shopCategoryBackgroundColor == null || response.data.shopCategoryBackgroundColor.length< 1?"#fff":response.data.shopCategoryBackgroundColor;
                    this.categoryForegroundColor = response.data.shopCategoryForegroundColor == null || response.data.shopCategoryForegroundColor.length< 1?"#fff":response.data.shopCategoryForegroundColor;
                    // 渲染店铺主要招牌图
                    var shopPrimaryImage = response.data.shopImage;
                    if(shopPrimaryImage.length < 1){

                    } else{
                        this.hideUpload2 = true;
                        this.fileList2.push({name: shopHead, url: '/static/img/seller/shop/'+shopPrimaryImage});
                    }

                    // 渲染店铺文字资料
                    this.shopInfo.name = response.data.shopName;
                    this.shopInfo.detail = response.data.shopInfo;
                    // 初始化级联地区
                    var addressCode = response.data.addressCode;
                    this.shopInfo.addressCode = addressCode;
                    this.shopInfo.address = response.data.address;
                    // 如果用户填写过地区，才进行默认选择
                    if(addressCode.length > 0){
                        let addressDefaultValue = [];
                        let addressArray = addressCode.split(",");
                        for (let i = 0; i < addressArray.length; i++) {
                            addressDefaultValue.push(addressArray[i]+"");
                        }
                        this.selectedOptions = addressDefaultValue;
                    }


                });
            },
            // 修改店铺分类背景颜色
            changeCategoryBackgroundColor(value){
                axios.post("/seller_logic/updateShopCategoryBackgroundColor.htm", {color: value}).then(res =>{
                });
            },
            // 前景色
            changeCategoryForegroundColor(value){
                axios.post("/seller_logic/updateShopCategoryForegroundColor.htm", {color: value}).then(res =>{
                });
            },
            // 初始化地区
            initDistPicker() {
                console.log("initDistrictsPicker");
                let self = this;
                axios.get("/static/json/districts.json").then(function(respones) {
                    console.log("respones==>", respones);
                    let distData = respones.data;
                    let options = [];
                    // 省
                    for (var provinceKy in distData["100000"]) {
                        let optProvinceItem = {
                            value: provinceKy,
                            label: distData["100000"][provinceKy]
                        };
                        if (distData[provinceKy]) {
                            // 市
                            for (var cityKy in distData[provinceKy]) {
                                optProvinceItem.children = optProvinceItem.children
                                    ? optProvinceItem.children
                                    : [];
                                let optCityItem = {
                                    value: cityKy,
                                    label: distData[provinceKy][cityKy]
                                };
                                if (distData[cityKy]) {
                                    // 区
                                    for (var areaKy in distData[cityKy]) {
                                        optCityItem.children = optCityItem.children
                                            ? optCityItem.children
                                            : [];
                                        let optAreaItem = {
                                            value: areaKy,
                                            label: distData[cityKy][areaKy]
                                        };
                                        optCityItem.children.push(optAreaItem);
                                    }
                                }
                                optProvinceItem.children.push(optCityItem);
                            }
                        }
                        options.push(optProvinceItem);
                    }
                    self.distData = distData;
                    self.options = options;
                });
            },
            //选择地区
            handleChange(value) {
                let self = this;
                let addressCodeStr = "";
                for (let i = 0; i < value.length; i++) {
                    addressCodeStr+=value[i];
                    if(i != value.length-1){
                        addressCodeStr+=",";
                    }
                }
                this.shopInfo.addressCode = addressCodeStr;
                //获取省名
                self.options.map((item, index) => {
                    if (item.value == value[0]) {
                        self.cityArr = item.children; //存储城市列表
                        self.province = item.label;
                    }
                });
                //获取市名
                self.cityArr.map((item, index) => {
                    if (item.value == value[1]) {
                        self.areaArr = item.children; //存储区县列表
                        self.city = item.label;
                    }
                });
                //获取区县名
                self.areaArr.map((item, index) => {
                    if (item.value == value[2]) {
                        self.area = item.label;
                    }
                });
                self.provinceCityArea = self.province +" "+ self.city +" "+ self.area;
                this.shopInfo.address = self.provinceCityArea;
            },
            // 轮播部分
            findNewImages(){
                axios.post('/seller_logic/findAllShopSwitchImage.htm').then(async (res) => {
                    let response = res.data.data;
                    console.log(response)
                    this.revolvingLanternImages = [];
                    for (let i = 0; i < response.length; i++) {
                        let path = response[i].shopSwitchPath;
                        let image = {
                            name: path.substring(path.lastIndexOf("/")+1, path.length),
                            url: path
                        }
                        this.revolvingLanternImages.push(image);
                    }
                });
            },
            handleSuccess(res, file) {
                this.$message({
                    type: "info",
                    message: "图片上传成功",
                    duration: 6000,
                });
                this.findNewImages();
            },
            handleRemove(file, fileList) {
                let fileName = file.name;
                console.log(fileName)
                let par = {fileName: fileName};
                axios.post('/seller_logic/deleteShopSwitchImage.htm', par).then(res=>{
                    console.log(res);
                    this.findNewImages();
                })
            },
            handleSwitchPreview() {
                this.switchVisible = true;
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `请勿频繁上传图片操作，您已经选择6个文件，真的需要重新上传，请先清除不需要的图片`
                );
            },
            beforeUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isBMP = file.type === 'image/bmp';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG && !isBMP) {
                    this.$message.warning('上传图片必须是JPG/GIF/PNG/BMP 格式!');
                }
                if (!isLt2M) {
                    this.$message.warning('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
            },
            beforeRemove(file, fileList) {
                return true;
                // return this.$confirm(`确定移除 ${file.name}？`);
            },
        },
        mounted() {
            this.findSellerInfo();
            this.getNewShop();
            this.initDistPicker();
            this.findNewImages();
        }
    })
</script>
<jsp:include page="/public_page/open_chat.jsp"></jsp:include>
</body>
</html>
